<div class="df jcc" style="position:relative;width:100%">
  <mat-card class="panel-bug">
    <!-- <i class="icon iconfont">&#xe6c3;</i> -->
    <mat-card-title
      style="display:flex; justify-content: space-between;align-items: baseline;"
      >{{ "bug.head" | translate: lang }}
      <span
        style="font-size:14px;color: #116ceb;cursor: pointer;"
        (click)="toggleSample()"
        *ngIf="isGotBug"
        l10nTranslate
        >bug.show_sample</span
      >
    </mat-card-title>
    <form [formGroup]="validateForm" (ngSubmit)="onSubmit()">
      <div class="i">
        <mat-form-field>
          <input
            matInput
            formControlName="title"
            placeholder="{{ 'bug.title.placeholder' | translate: lang }}"
          />
          <mat-error
            l10nTranslate
            *ngIf="validateForm.controls.title.hasError('required')"
          >
            bug.title.error.require
          </mat-error>
        </mat-form-field>
      </div>
      <div class="i">
        <mat-form-field>
          <input
            matInput
            type="text"
            formControlName="email"
            placeholder="{{ 'bug.email.placeholder' | translate: lang }}"
          />
          <mat-error
            l10nTranslate
            *ngIf="validateForm.controls.email.hasError('required')"
          >
            bug.email.error.require
          </mat-error>
        </mat-form-field>
      </div>

      <div class="i">
        <mat-form-field>
          <input
            matInput
            type="text"
            formControlName="url"
            placeholder="{{ 'bug.url.text' | translate: lang }}"
          />
          <mat-error
            l10nTranslate
            *ngIf="validateForm.controls.url.hasError('required')"
          >
            bug.url.error.require
          </mat-error>
        </mat-form-field>
      </div>

      <div class="i">
        <mat-form-field>
          <textarea
            matInput
            formControlName="review"
            placeholder="{{ 'bug.review.placeholder' | translate: lang }}"
          ></textarea>
          <mat-error
            l10nTranslate
            *ngIf="validateForm.controls.review.hasError('required')"
          >
            bug.review.error.require
          </mat-error>
        </mat-form-field>
      </div>

      <div class="i">
        <app-file #file (onChange)="onChangeFile($event)"></app-file>
      </div>

      <div class="i">
        <h4>{{ "bug.sys.label" | translate: lang }}</h4>
        <mat-radio-group formControlName="sys">
          <mat-radio-button *ngFor="let item of sysLists" [value]="item.label">
            {{ item.label }}
          </mat-radio-button>
        </mat-radio-group>
      </div>

      <div class="i">
        <h4>{{ "bug.browser.label" | translate: lang }}</h4>
        <mat-radio-group formControlName="browser">
          <mat-radio-button
            *ngFor="let item of browserLists"
            [value]="item.label"
          >
            {{ item.label }}
          </mat-radio-button>
        </mat-radio-group>
      </div>

      <div class="i submit">
        <button
          style="width: 100%;"
          class="submit"
          mat-button
          [disabled]="!validateForm.valid"
        >
          {{ "bug.btn.submit.text" | translate: lang }}
        </button>
      </div>
    </form>
  </mat-card>
  <div
    class="sample"
    *ngIf="!isGotBug"
    style="position: absolute;width:390px;right:50px;"
    (click)="toggleSample()"
  >
    <img
      style="width: 100%;"
      src="{{ 'bug.sample' | translate: lang }}"
      alt=""
    />
  </div>
</div>
